import "@/assets/styles/DataSource/ConnectDatabaseDialog.scss";

import PropTypes from "prop-types";
import { useState } from "react";
console.log("ConnectDatabaseModal",PropTypes);

/*global Input*/
const { Search } = Input;
ConnectDatabaseModal.propTypes = {
  isShow: PropTypes.bool.isRequired, // 验证 isShow 是否为布尔值并且必须存在
  closeModal: PropTypes.func.isRequired, // 验证 closeModal 是否为函数并且必须存在
};
function ConnectDatabaseModal({ isShow, closeModal }) {
  const handleOk = () => {
    closeModal();
  };
  // 数据集合
  const [items, setItems] = useState([
    {
      name: "事务型",
      id: "transactional", //锚点
      items: [
        {
          name: "MySQL",
        },
        {
          name: "Oracle",
        },
        {
          name: "IBM DB2",
        },
      ],
    },
    {
      name: "分析型",
      id: "analysis",
      items: [
        {
          name: "Vertica",
        },
        {
          name: "Hive",
        },
        {
          name: "南大通用",
        },
        {
          name: "LinkoopDb",
        },
        {
          name: "TiDB",
        },
      ],
    },
    {
      name: "Hadoop类",
      id: "Hadoop",
      items: [
        {
          name: "Apache Impata",
        },
        {
          name: "Hive",
        },
        {
          name: "Spark SQL",
        },
        {
          name: "LinkoopDb",
        },
      ],
    },
  ]);
  // 锚点集合
  const anchors = items.map(({ id, name }) => {
    return { key: id, href: "#" + id, title: name };
  });

  //  搜索
  const [filterStr, setFilterStr] = useState();

  const onSearch = (value) => {
    setFilterStr(value);
  };
  // 搜索关键字高亮显示（不区分大小写模糊）
  const getItemName = (name) => {
    // 搜索内容为空直接返回
    if (!filterStr) return <span>{name}</span>;
    // 搜索内容不为空，高亮显示
    const regex = new RegExp(filterStr, "gi"); // 创建正则表达式，不区分大小写
    if (regex.test(name)) {
      const highlightedContent = name.replace(
        regex,
        (match) => `<span style="color: red;">${match}</span>`
      );
      return (
        <span dangerouslySetInnerHTML={{ __html: highlightedContent }}></span>
      );
    }
    return <span>{name}</span>;
  };
  return (
    <Modal
      title="连接数据库"
      open={isShow}
      onOk={handleOk}
      onCancel={closeModal}
      width="1000px"
    >
      <Flex gap="middle" justify="space-between">
        <Anchor
          affix={false}
          direction="horizontal"
          items={anchors}
          getContainer={() =>
            document.querySelector(".lego-dataSource-wrapper")
          }
        />
        <Search
          style={{ maxWidth: "200px" }}
          placeholder="搜索"
          onSearch={onSearch}
          enterButton
        />
      </Flex>

      <div className="lego-dataSource-wrapper">
        {items.map(({ name, items, id }) => {
          return (
            <Space direction="vertical" key={name}>
              <h4 id={id}>{name}</h4>
              <Row gutter={[20, 20]}>
                {items.map(({ name }, index) => {
                  return (
                    <Col
                      key={"projectList" + index}
                      style={{
                        display: "flex",
                        justifyContent: "center",
                      }}
                      span={6}
                    >
                      <Card
                        hoverable
                        className="lego-dataSource-card"
                        cover={
                          <img
                            style={{ objectFit: "cover" }}
                            height="100"
                            alt="example"
                            src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                          />
                        }
                      >
                        {getItemName(name)}
                      </Card>
                    </Col>
                  );
                })}
              </Row>
            </Space>
          );
        })}
      </div>
    </Modal>
  );
}

export default ConnectDatabaseModal;
